<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .alert{width:300px;height:200px;background: #efefef;position: absolute;left:100px;top:100px;display: none;}
    </style>
</head>
<body>
    <div class="alert">
        <h2>这是弹出框</h2>
        <div class="cont">
            这是内容区域
        </div>
        <input type="button" value="确定" id="submit">
        <input type="button" value="取消" id="cancel">
    </div>
</body>
<script>
    const oalert = document.querySelector(".alert");
    const osubmit = document.querySelector("#submit");
    const ocancel = document.querySelector("#cancel");

    // 记录弹出框被确定or取消？的状态
    let state = null;

    // 默认显示弹出框
    show();

    // 点击确定，隐藏
    osubmit.onclick = function(){
        oalert.style.display = "none";
        state = true
    }
    // 点击取消，隐藏
    ocancel.onclick = function(){
        oalert.style.display = "none";
        state = false
    }

    // 其他功能，查看弹出框被确定or取消？
    document.onclick = function(){
        console.log(state)
    }



    function show(){
        oalert.style.display = "block";
    }


    
</script>
</html>